<template>
    <div id="fuwenbentest">
         <p>商品名称:<input type="text" v-model="name"></p>
         <p>商品价格:<input type="text" v-model="price"></p>
         <p>商品数量:<input type="text" v-model="number"></p>
         <p>商品颜色:<input type="text" v-model="color"></p>
         <p>商品尺寸:<input type="text" v-model="size"></p>
         <p>商品版本:<input type="text" v-model="version"></p>
         <p>商品简介:<input type="text" v-model="content"></p>
        <!--  新增时输入 -->
        商品detail:
        <quill-editor 
            v-model="detail" 
            ref="myQuillEditor" 
            :options="editorOption" 
            @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
            @change="onEditorChange($event)">
        </quill-editor>
        <!-- 从数据库读取展示 -->
        <p><button @click="post_info()">提交</button></p>
          
        <h1>------------------这是一个分割线-------------------</h1>
       <div v-html="str" class="ql-editor">
            {{str}}
        </div>
        
    </div>
    
</template>
<script>
import { quillEditor } from "vue-quill-editor"; //调用编辑器
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
import { send_fuwenben } from './axios_api/api';
export default {
    name:"fuwenbentest",
    components: {
        quillEditor
    },
    data(){
        return{
            editorOption:{},
            content:"",
            name:"",
            price:"",
            number:"",
            color:"",
            size:"",
            version:"",
            str:"",
            detail:"",
        }
    },methods:{
         onEditorReady(editor) { // 准备编辑器
 
        },
        onEditorBlur(){}, // 失去焦点事件
        onEditorFocus(){}, // 获得焦点事件
        onEditorChange(){}, // 内容改变事件
        post_info(){
           var data ={
                  "name":this.name,
                  "price":this.price,
                  "number":this.number,
                  "color":this.color,
                  "size":this.size,
                  "version":this.version,
                  "content":this.content,
                  "detail":this.detail,
              }
              send_fuwenben(data).then(res=>{
                  console.log(res)
                  this.str = res
              })
              
        },
        
    },
    computed: {
        editor() {
            return this.$refs.myQuillEditor.quill;
        },
    }
}
</script>
<style>

</style>